<template>
  <div class="info">
    <div class="meta-info">
      <div class="book-img">
        <img style="display: block;width: 100%;height: 100%;" :src="book[0].cover" v-if="book[0].cover">
      </div>
      <div class="book-info">
        <div class="book-title">{{book[0].title}}</div>
        <div class="book-intro">{{book[0].abs}}</div>
        <div class="action">
          <el-button style="margin-right: 15px" type="primary" @click="showBook(book[0].id,1)">开始阅读</el-button>
          <el-button type="primary" plain @click="collect">收藏</el-button>
          <el-button type="primary" plain style="margin-left: 15px" @click="dialogFormVisible = true">发表书评</el-button>
        </div>
        <el-dialog title="发表评论" :visible.sync="dialogFormVisible" center>
          <el-form :model="form">
            <el-form-item label="标题" :label-width="formLabelWidth">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item label="活动区域" :label-width="formLabelWidth">-->
<!--              <el-select v-model="form.region" placeholder="请选择活动区域">-->
<!--                <el-option label="区域一" value="shanghai"></el-option>-->
<!--                <el-option label="区域二" value="beijing"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="内容" :label-width="formLabelWidth">
              <el-input v-model="form.text" autocomplete="off" type="textarea"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" style="margin-right: 10px">取 消</el-button>
            <el-button type="primary" @click="setNewComment">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="directory">
      <span style="display:block;font-size: 24px;font-weight: bold;margin-bottom: 40px;text-align: center">目录</span>
      <el-row style="text-align: left">
          <el-button class="volume"
                     plain v-for="volume in volumes"
                     :key="volume.id"
                      @click="showBook(book[0].id,volume.id)">
            {{ volume.title }}
          </el-button>
      </el-row>
    </div>
    <div>
      <div class="myart1">
        <art v-for="a in allData.data" :key="a.comment_id" v-bind="a"/>
        <el-empty
            v-if="allData.length == 0"
            :image-size="250"
            description="暂未发表任何书评"
        ></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import art from '../library/art.vue'
export default {
  name: "BookInfo",
  components: {art},
  data(){
    return{
      book:{},
      volumes:[],
      allData:[],
      dialogFormVisible:false,
      form: {
        title: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        text: ''
      },
      formLabelWidth: '120px'
    }
  },
  mounted() {
    this.getInfo()
  },
  methods:{
    collect(){
      this.$axios
          .post('/setCollect', {
            bookId: this.book[0].id,
            userId:window.localStorage.getItem('userId')
          })
          .then(res=>{
            if(res=='0'){
              this.$message({
                message: '收藏成功',
                type: 'success'
              });
            }else{
              this.$message('您已经收藏');
            }
          })
    },
    getInfo(){
      let id = this.$route.params.id
      this.$axios.get('/book?id='+id).then(resp => {
        if (resp && resp.status === 200) {
          this.book = resp.data
          console.log(this.book)
        }
      })
      this.$axios.get('/volume?book_id='+id).then(resp=>{
        if (resp && resp.status === 200){
          this.volumes=resp.data
        }
      })
      this.$axios
          .post('/getComment', {
            bookId: window.localStorage.getItem('bookId'),
          })
          .then(res=>{
            this.allData = res
          })
    },
    showBook(book_id,volume_id){
      this.$router.push({ path: '/showBook', query: { book_id:book_id,volume_id: volume_id}})
    },
    setNewComment(){
      var currentDate = new Date();

// 获取年、月、日
      var year = currentDate.getFullYear();
      var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月从0开始计数，所以需要+1
      var day = currentDate.getDate().toString().padStart(2, '0');

// 生成 "YYYY-MM-DD" 格式的日期字符串
      var formattedDate = year + '-' + month + '-' + day;
      this.$axios
          .post('/setNewComment', {
            bookId: window.localStorage.getItem('bookId'),
            author:window.localStorage.getItem('author'),
            authorId:window.localStorage.getItem('userId'),
            bookName:this.book[0].title,
            title:this.form.title,
            commentCounts:this.form.text,
            createDate:formattedDate,
          })
          .then(res=>{
            this.$message({
              message: '发表成功，请等待管理员审核',
              type: 'success'
            });
          })
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
.img {
  width: 80px;
  height: 80px;
}
.el-card {
  margin-bottom: 30px;
}
.info{
  position: relative;
  width: 808px;
  min-height: 500px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px #e7e7fc;
  border-radius: 4px;
  margin: 40px auto;
  padding: 15px;
}
.meta-info{
  position: relative;
  padding-top: 25px;
  padding-left: 198px;
  min-height: 265px;
}
.meta-info .book-img{
  position: absolute;
  left: 15px;
  top: 15px;
  width: 167px;
  height: 251px;
  border: 1px solid #e7e7e7;
}
.meta-info .book-info .book-title{
  font-weight: 700;
  overflow: hidden;
  font-size: 26px;
  color: #333;
  text-align: left;
  display: block;
  word-wrap: break-word;
}
.meta-info .book-info .book-intro{
  margin-top: 20px;
  font-size: 16px;
  color: #333;
  text-align: left;
  text-indent: 2em;
}
.meta-info .book-info .action{
  position: absolute;
  bottom: 0;
  left: 198px;
  right: 25px;
  padding-right: 280px;
}
.directory{
  margin: 20px;
  padding: 20px;
  border-top: 1px solid #eee;
}
.el-button+.el-button {
  margin-left: 0px;
}
.volume{
  margin: 0 20px 20px 0;
}
</style>